@charset "utf-8";
@function r($px) {
    @return $px/$fontsize*1rem;
}
@import "../_reset.scss";
$fontsize: 40;

html{
    position: relative;
    overflow: hidden;
    
}
#web{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #bf0c21;
    font-family: "宋体","微软雅黑";
    background-image: url(../../img/set/bg1.png);
    background-size: 100% 100%; 
    animation: opens 1.4s linear;
  } 
  .prize-content{
      width: r(448);
      margin: 0 auto;
      text-align: center;
      padding-top: r(310);
      line-height:r(71);
      p{
          color: #E7C598;
          font-size: r(28);
      }
      input{
         height: r(50);
         width: r(327);
         border: none;
         outline: none;
         border-radius: r(8);
      }
      input:focus{
          border: none;
          outline: none;
      }
      .btn_img{
          width: r(250);
          height: r(45);
          margin: 0 auto;
          margin-top: r(62);
          img{
              width: 100%;
              height: 100%;
          }
      }
  }
  
  .home{
      height: r(41);
      width: r(41);
      position: fixed;
      right:r(56);
      bottom: r(25);
      a{
          display: block;
           width: 100%;
           height: 100%;
           img{
            width: 100%;
           height: 100%; 
           }
      }
  }
  
  #wrapper{
    width: 100%;
    height: 100%;
    position: absolute;
    background:rgba(0,0,0,.5);
    font-family: "宋体","微软雅黑";
    display: none; 
    }
        #dialog{
            width: r(413);
            height: r(250);
            margin: 0 auto;
            background: #E7C598;
//          margin-top: r(353);
            position: absolute;
            top: r(353);
            border-radius: r(8);
            position: relative; 
            display: none;
            .claseDialogBtn{
              width: r(36); 
              height: r(36);
              position: absolute; 
              right: r(16);
              top:r(11);
              img{
                  width: 100%;
                  height: 100%;
              }
            }
           p{
            text-align: center;
            color: #BF0C21;
            font-size: r(40);
           padding-top: r(100);
            font-weight: bold;
        }
        }
       
      
  
.animated{
    -webkit-animation-duration:1.4s;
    animation-duration:1.4s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both
}


@keyframes bounceOutUp {
  0% {
//   opacity: 1;
     transform: scale(1);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
     transform: scale(0);
//  opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
  animation-duration:1.4s;

}
@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@keyframes opens{
    0%{
      opacity: 0.2;
      transform: translateX(-100%) rotateY(-30deg);
//    transform-origin: left;
      }
    25%{
       opacity: 0.4;
      transform: translateX(0%) rotateY(30deg);  
    }  
   50%{
        opacity: 0.6;
        transform:  translateX(0%) rotateY(-15deg);
    }
    75%{
        opacity: 0.8;
        transform:  translateX(0%) rotateY(15deg);
    }
    100%{
        opacity: 1;
        transform:  translateX(0%) rotateY(0deg);
    }
    }